<template>
  <div class="goodsList">
    <div class="left">
      <img :src="item.goods_image" alt="" width="100%" />
    </div>
    <div class="right">
      <p class="title">{{ item.goods_name }}</p>
      <p class="sale">已销售：{{ item.goods_sales }}件</p>
      <p class="price">
        <span class="new">￥{{ item.goods_price_min }}</span>
        <span class="old">￥{{ item.goods_price_max }}</span>
      </p>
    </div>
  </div>
</template>
<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》';
export default {
  props: {
    item: {
      type: Object,
      default: () => {
        return {}
      }
    }
  },
  // import引入的组件需要注入到对象中才能使用",
  components: {},
  data () {
    // 这里存放数据",
    return {}
  },
  // 监听属性 类似于data概念",
  computed: {},
  // 方法集合",
  methods: {},
  // 生命周期 - 创建完成（可以访问当前this实例）",数据模型已加载，方法已加载,html模板已加载,html模板未渲染
  created () {}
}
</script>
<style lang="less">
.goodsList {
  display: flex;
  justify-content: space-between;

  .left img {
    width: 180px;
    height: 180px;
    padding: 20px;
  }

  .right {
    padding: 10px;
    margin-top: 15px;

    .title {
      overflow: hidden;
      -webkit-line-clamp: 2;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      font-size: 17px;
      margin-bottom: 10px;
    }

    .sale {
      font-size: 14px;
      color: darkgrey;
      margin-bottom: 10px;
    }

    .price {
      .new {
        color: red;
        font-size: 18px;
        margin-right: 5px;
        line-height: 20px;
      }

      .old {
        text-decoration: line-through;
        color: darkgrey;
        font-size: 14px;
        line-height: 20px;
      }
    }
  }
}
</style>
